$val_8:8px;
$val_16:16px;
$val_24:24px;
$val_36:36px;
$val_48:48px;

@for $i from 1 to 10 {
    .text-overflow-line#{$i} {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: $i;
        -webkit-box-orient: vertical;
    }
}

@mixin color-gradient {
    background: linear-gradient(to right, #2884f6, #095FC8);
}

@mixin text-gradient {
    background: linear-gradient(to right, #ffffff, #23fff7);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: bold;
}

html {
    width: 100%;
    height: 100%;
    background-color: #23426e;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    background: url('/images/bg.png');
    background-size: 100% 100%;
    overflow: auto;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

textarea {
    resize: none;
}

.page-container {
    width: 100%;
    height: 100%;
    position: relative;

    .headerTime {
        flex-shrink: 0;
        height: 66px;
        line-height: 66px;
        margin-right: 32px;
        color: #ffffff;
        font-weight: bold;

        .dateText {
            font-size: 16px;
        }

        .timeText {
            font-size: 26px;
            margin-left: 20px;
        }
    }

    .userInfo {
        flex-shrink: 0;
        height: 66px;
        line-height: 66px;

        .aidicon-account-circle {
            font-size: 26px;
            color: rgba($color: #FFFFFF, $alpha: 0.6);
            margin-right: 12px;
            position: relative;
            top: 8px;
        }

        .name {
            font-size: 16px;
            color: rgba($color: #6ED7FE, $alpha: 0.6);
            margin-right: 12px;
        }

        .logout {
            font-size: 16px;
            color: rgba($color: #6ED7FE, $alpha: 1.0);
            margin-right: 32px;
            cursor: pointer;
        }
    }
}

.header-container {
    width: 100%;
    height: 66px;
    display: flex;
    background: url('/images/top_01.png');
    background-size: 100% 100%;

    .logo-img {
        width: 360px;
        height: 49px;
        flex-shrink: 0;
        margin-left: 30px;
        margin-top: 12px;
        cursor: pointer;
    }

    .top-menu {
        flex: 1;
        display: flex;
        justify-content: center;
        margin-left: 40px;

        li {
            width: 100px;
            height: 66px;
            line-height: 56px;
            font-size: 16px;
            letter-spacing: 1px;
            color: #8c9bae;
            text-align: center;
            position: relative;
            cursor: pointer;

            &>a {
                color: #8c9bae;

                &:visited {
                    color: #8c9bae;
                }
            }

            &.active {
                a {
                    color: #f4fbfd;
                }

                &::before {
                    content: "";
                    width: 18px;
                    height: 17px;
                    display: inline-block;
                    background: url('/images/main_11.png');
                    position: absolute;
                    left: 41px;
                    bottom: 10px;
                }
            }

            &:hover {
                a {
                    color: #f4fbfd;
                }
            }
        }
    }
}

.side-menu {
    background-color: rgba($color: #000000, $alpha: 0.2);
    height: 100%;
    flex-shrink: 0;
    position: relative;

    .side-list {
        width: 335px;
        padding: 30px 0;
        height: auto;
        overflow: hidden;
    }

    .menu-wrap {
        width: 100%;
        padding: 0 50px;
        cursor: pointer;

        .menu-title {
            display: block;
            width: 100%;
            height: 37px;
            line-height: 37px;
            background-color: rgba($color: #8dc6ec, $alpha: 0.1);
            margin-bottom: 15px;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            padding-left: 57px;

            &::after {
                content: "";
                position: absolute;
                pointer-events: none;
                width: 6px;
                height: 100%;
                border: 1px solid rgba($color: #1d9ada, $alpha: 0.8);
                top: 0;
                right: 0;
                border-left: none;
            }

            .menu-icon {
                position: absolute;
                left: 0;
                top: 0;
                display: inline-block;
                width: 37px;
                height: 36px;
                background-color: rgba($color: #8dc6ec, $alpha: 0.06);
                border-left: 1px solid rgba($color: #1d9ada, $alpha: 0.8);

                &::before {
                    content: "";
                    display: inline-block;
                    width: 36px;
                    height: 36px;
                }

                &.icon-1 {
                    &::before {
                        background: url('/images/main_01.png') no-repeat center center;
                    }
                }

                &.icon-2 {
                    &::before {
                        background: url('/images/main_02.png') no-repeat center center;
                    }
                }

                &.icon-3 {
                    &::before {
                        background: url('/images/main_03.png') no-repeat center center;
                    }
                }

                &.icon-4 {
                    &::before {
                        background: url('/images/main_04.png') no-repeat center center;
                    }
                }

                &.icon-5 {
                    &::before {
                        background: url('/images/main_05.png') no-repeat center center;
                    }
                }

                &.icon-6 {
                    &::before {
                        background: url('/images/main_06.png') no-repeat center center;
                    }
                }
            }

            &:hover {
                color: #0094ff;

                .menu-icon {
                    &.icon-1 {
                        &::before {
                            background: url('/images/main_01_hover.png') no-repeat center center;
                        }
                    }

                    &.icon-2 {
                        &::before {
                            background: url('/images/main_02_hover.png') no-repeat center center;
                        }
                    }

                    &.icon-3 {
                        &::before {
                            background: url('/images/main_03_hover.png') no-repeat center center;
                        }
                    }

                    &.icon-4 {
                        &::before {
                            background: url('/images/main_04_hover.png') no-repeat center center;
                        }
                    }

                    &.icon-5 {
                        &::before {
                            background: url('/images/main_05_hover.png') no-repeat center center;
                        }
                    }

                    &.icon-6 {
                        &::before {
                            background: url('/images/main_06_hover.png') no-repeat center center;
                        }
                    }
                }
            }
        }

        .menu-child {
            display: none;
            width: 100%;
            height: auto;
            background-color: rgba($color: #003182, $alpha: 0.1);
            border: 1px solid rgba($color: #1c91ff, $alpha: 0.4);
            padding: 10px 8px;
            margin-bottom: 15px;

            .menu-child-list {
                width: 100%;
                width: 217px;
                height: auto;
                background-color: rgba($color: #003182, $alpha: 0.2);
                box-shadow: inset 2px 0px 16px 0px rgba(50, 111, 166, 0.8);
                border: 1px solid #1c91ff;

                .child-name {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    position: relative;
                    padding-left: 36px;
                    padding-right: 16px;

                    a {
                        color: #929dab;
                    }

                    .sub-menu {
                        display: inline-block;
                        width: 180px;
                    }

                    &:hover {
                        a {
                            color: #0094ff;
                        }
                    }

                    &.active {
                        background-color: #2985f7;

                        a {
                            color: #ffffff;
                        }

                        &::before {
                            content: "";
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background-color: #00ffff;
                            position: absolute;
                            left: 18px;
                            top: 11px;
                        }
                    }
                }
            }
        }


        &.active {
            .menu-title {
                background-color: #2985f7;

                .menu-icon {
                    background-color: rgba($color: #002c63, $alpha: 0.2);
                }

                &:hover {
                    color: #ffffff;

                    .menu-icon {
                        &.icon-1 {
                            &::before {
                                background: url('/images/main_01.png') no-repeat center center;
                            }
                        }

                        &.icon-2 {
                            &::before {
                                background: url('/images/main_02.png') no-repeat center center;
                            }
                        }

                        &.icon-3 {
                            &::before {
                                background: url('/images/main_03.png') no-repeat center center;
                            }
                        }

                        &.icon-4 {
                            &::before {
                                background: url('/images/main_04.png') no-repeat center center;
                            }
                        }

                        &.icon-5 {
                            &::before {
                                background: url('/images/main_05.png') no-repeat center center;
                            }
                        }

                        &.icon-6 {
                            &::before {
                                background: url('/images/main_06.png') no-repeat center center;
                            }
                        }
                    }
                }
            }
        }

        &.fold {
            .menu-child {
                display: block;
            }
        }
    }

    .side-arrow {
        width: 24px;
        height: 40px;
        line-height: 44px;
        text-align: center;
        background-color: rgba($color: #436da9, $alpha: .1);
        border-radius: 0 3px 3px 0;
        position: absolute;
        right: -24px;
        top: 50%;
        cursor: pointer;
        z-index: 99;

        .aidicon {
            color: #1d709e;
            font-size: 16px;
        }
    }
}

.display-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}